<template>
	<view class="page">
		<view class="order-receive">
			<view class="order-receive-title">收货信息</view>
			<view class="not-address">
				<text>您还没有收货地址，前往设置一个吧</text>
				<image src="http://yao.hayzon.com/static/index/arrow.png"></image>
			</view>
		</view>
		<view class="order-sender">
			<view class="order-sender-title">发货药房</view>
			<view class="order-sender-box">
				<image class="order-sender-icon" :src="orderDetail.sender.logo"></image>
				<view class="order-sender-info-box">
					<view class="order-sender-orgName">
						<text>{{ orderDetail.sender.orgName }}</text>
						<image src="http://yao.hayzon.com/static/orderDetail/info.png"></image>
					</view>
					<view class="order-sender-infomation">{{ orderDetail.sender.infomation }}</view>
					<view class="order-sender-type">{{ orderDetail.sender.type }}</view>
				</view>
			</view>
		</view>
		<view class="order-prescript">
			<view class="order-prescript-title">处方</view>
			<view class="order-prescript-subtitle">{{ orderDetail.prescriptSubtitle }}</view>
			<view class="order-prescript-detail">
				<view>
					<text v-for="(item,index) in orderDetail.prescript" :key="index">{{ item }}</text>
				</view>
				<view class="order-prescript-pay">购买后即可查看完整处方</view>
			</view>
			<view class="line-left-right">
				<text>数量</text>
				<text>6剂</text>
			</view>
		</view>
		<view class="price-box">
			<view class="line-left-right">
				<text>药品价格</text>
				<text>￥182.05</text>
			</view>
			<view class="line-left-right">
				<text>运费</text>
				<text>￥0.00</text>
			</view>

		</view>
		<view class="bottom-button-box">
			<view>
				<text>合计:<span>￥182.05</span></text>
				<text>满百包邮</text>
			</view>
			<view>提交需求单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {
					orderNumber: "50190730112729290",
					orderDate: "2019年7月30日 11:27",
					orderStatus: "1", //这里应该有对应关系吧？
					orderReceiveName: "孙先生",
					orderReceivePhone: "18813102489",
					orderReceiveAddress: "天津河西区大户头路28号",
					sender: {
						logo: "http://yao.hayzon.com/static/orderDetail/logo.png",
						orgName: "中药饮片-由康美提供",
						infomation: "全国最大重要饮片提供商，17:00前下单当日寄出。",
						type: "传统药材 自己煎煮"
					},
					prescriptSubtitle: "处方组成",
					prescript: ["黄芩", "甘草", "法半夏", "醋柴胡", "羌活", "苍术", "桂枝", "川牛膝", "虎杖", "麻黄", "大黄"],
					endTime: "14:47"
				}
			}
		},
		filters: {
			orderStatusFilter(value) {
				switch (value) {
					case "1":
						return "待支付";
					default:
						return "待支付";
				}
			}
		}
	}
	
</script>

<style>
	.page {
		background-repeat: no-repeat;
		background-size: cover;
		/* background-image: url("~http://yao.hayzon.com/static/temp/111.png"); */
		height: 100%;
	}

	.order-head {
		margin-top: 10upx;
		padding: 35upx;
		position: relative;
		background-color: #fff;
	}

	.order-head-number {
		font-weight: bold;
		color: #666666;
	}

	.order-head-date {
		color: #999999;
		font-size: 0.8em;
	}

	.order-head-status {
		position: absolute;
		right: 10upx;
		top: 35upx;
		color: #da6b57;
	}

	.order-receive {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-receive-title {
		font-weight: bold;
		color: #333333;
	}

	.order-receive-orderer {
		margin-top: 10upx;
	}

	.order-receive-orderer-name {
		color: #333333;
		margin-right: 35upx;
	}

	.order-receive-orderer-phone {
		font-size: 0.8em;
		letter-spacing: 1px;
	}

	.order-receive-orderer-address {
		color: #a0a0a0;
	}

	.order-sender {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-sender-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;

	}

	.order-sender-box {
		display: flex;
		flex-direction: row;
	}

	.order-sender-icon {
		width: 100upx;
		height: 100upx;
		flex-shrink: 0;
		margin-top: 60upx;
		margin-left: 5upx;
	}

	.order-sender-info-box {
		padding: 20upx;
		padding-top: 25upx;
	}

	.order-sender-orgName {
		font-size: 1.2em;
		color: #333333;
	}

	.order-sender-orgName image {
		width: 30upx;
		height: 30upx;
		vertical-align: text-bottom;
	}

	.order-sender-infomation {
		color: #999999;
		line-height: 1.4;
	}

	.order-sender-type {
		color: #666666;
	}

	.order-prescript {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 6upx;
		position: relative;
		background-color: #fff;
	}

	.order-prescript-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;
	}

	.order-prescript-subtitle {
		color: #666666;
	}

	.order-prescript-detail {
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("~http://yao.hayzon.com/static/orderDetail/boxBackground.png");
	}

	.order-prescript-detail view:first-child {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20upx;
		padding-left: 50upx;
		padding-bottom: 35upx;
	}

	.order-prescript-detail view:first-child text {
		font-size: 1.2em;
		margin-right: 25upx;
		font-weight: bold;
	}

	.order-prescript-pay {
		color: #999999;
		text-align: center;
		line-height: 1.5;
		font-size: 1.1em;
	}

	.order-end-time {
		margin-top: 10upx;
		text-align: center;
		color: #999999;
		font-size: 0.7em;
		background-color: #ffffff;
	}

	.order-pay-button {
		margin-top: 20upx;
		background-color: #da6b57;
		margin-left: 30upx;
		margin-right: 30upx;
		line-height: 115upx;
		border-radius: 20upx;
		color: #ffffff;
		text-align: center;
		font-size: 1.5em;
	}

	.line-left-right {
		display: flex;
		flex-direction: row;
		font-size: 1.1em;
		color: #666666;
	}

	.line-left-right text {
		width: 50%;
	}

	.line-left-right text:last-child {
		text-align: right;
	}

	.not-address {
		position: relative;
	}

	.not-address text {
		color: #e1894d;
		font-size: 1.1em;
	}

	.not-address image {
		width: 40upx;
		height: 40upx;
		position: absolute;
		top: 8upx;
		right: 0;
	}

	.price-box {
		margin-top: 10upx;
		background-color: #ffffff;
		padding-left: 30upx;
		padding-right: 30upx;
	}

	.price-box .line-left-right {
		line-height: 2;
		border-bottom: 1px solid #999999;
	}
	.bottom-button-box{
		position:fixed;
		bottom:0;
		width:100%;
		display:flex;
	}
	.bottom-button-box view:first-child{
		background-color:#ffffff;
		flex-shrink: 0;
		width:60%;
		padding-left:30upx;
		padding-top:10upx;
	}
	.bottom-button-box view:first-child text{
		display:block;
	}
	.bottom-button-box view:first-child text:first-child{
		font-size:1.1em;
		font-weight: bold;
	}
	.bottom-button-box view:first-child text:last-child{
		font-size:0.9em;
		color:#999999;
	}
	.bottom-button-box view:first-child text:first-child span{
		color:#da6b57;
	}
	.bottom-button-box view:last-child{
		width:40%;
		background-color:#da6b57;
		color:#ffffff;
		height:120upx;
		font-size:1.2em;
		line-height:120upx;
		text-align: center;
		font-weight: bold;
	}
</style>
